<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>李土鸡后台管理系统</title>
  <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <!-- 导入公共页面 -->
    {{ include "./common/header.html" }}

    <!-- 导入公共页面 -->
    {{ include "./common/side.html" }}

    <div class="layui-body">
      <div class="layui-btn-group" style="margin: 15px;">
        <a type="button" class="layui-btn" href="/addCate">添加</a>
      </div>
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
        <table class="layui-table" id="cate" lay-filter="cate">
         
        </table>
      </div>
    </div>

  </div>
</body>

<script src="/assets/layui/layui.js"></script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery;
    
    table.render({
      elem: '#cate'
      ,url: '/cateData',
      toolbar:'#cateTool'
      ,cols: [[
        {field:'cate_id', width:80, title: '序号', sort: true}
        ,{field:'cate_name', width:100, edit:'text',title: '分类名称'}
        ,{field:'orderBy', width:180, edit:'text',title: '排序', sort: true}
        ,{fixed:"right", width:280, title: '操作',templet:(obj)=>{
          return `
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          `
        }}
      ]]
    });

    //监听单元格编辑
    table.on('edit(cate)', async function (obj) {
      const {data} = obj;
      const {code,message} = await $.post('/updCateData',data)
      if(code === 0){
        layer.msg(message)
      }
    });
    
    //监听行工具事件
    table.on('tool(cate)', function(obj){
      const {event,data} = obj;
      const {cate_id} = data;
      //询问框
      if(event === 'del'){
        layer.confirm('确认删除吗', {
          btn: ['是的','取消'] //按钮
        }, async function(){
          const {code} = await $.post('/deleteCate',{cate_id})
          if(code === 0){
            layer.msg('的确很重要', {icon: 1});
            // 刷新（重载）表格数据
            // location.reload();
            table.reload('cate')
          }
         
        }, function(){
          
        });
      }
      

    });
  });
  </script>

</html>